<template>
  <basic-dialog
    :visible.sync="dialogVisible"
    :handleClose="handleCloseDialog"
    :title="title"
    :show-footer="false"
    :width="'60%'"
  >
    <div class="form-container">
      <el-form ref="queryData" :inline="true" :model="queryData" @submit.native.prevent>
        <el-form-item label="人员姓名:" prop="userName">
          <el-input
            v-model="queryData.userName"
            placeholder="请输入人员姓名"
            @keyup.enter.native="handleQueryData(1)"
          ></el-input>
        </el-form-item>
        <el-form-item label="工号:" prop="jobNumber">
          <el-input
            v-model="queryData.jobNumber"
            placeholder="请输入工号"
            @keyup.enter.native="handleQueryData(1)"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQueryData(1)"
            >查询</el-button
          >
          <el-button @click="handleResetData('queryData')">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <BasicTable
      ref="basicTable"
      showActionCol
      :loading="tableInfo.loading"
      :columns="tableInfo.columns"
      :dataSource="tableInfo.list"
      :pagination="pagination"
      :pageSizes="pageSizes"
      :tableHeight="443"
      :showSelectCol="false"
      :actionRender="actionRender"
      @rowDblclick="handleSelectSupplier"
      @pageChange="handlePageChange"
      @pageSizeChange="handlePageSizeChange"
    />
  </basic-dialog>
</template>
<script>
import { mapGetters } from 'vuex';
import BasicDialog from '@/components/BasicDialog';
import BasicTable from '@/components/supplier/BasicTable';
import { getBtnsId } from '@/libs/btnsPermission';
import { queryHrUserService } from '@api/supplier/returnVisteManage';
import { isResponseSuccess } from '@/pages/supplier/utils/bizUtils';

export default {
  name: 'UserSelectDialog',
  components: {
    BasicDialog,
    BasicTable,
  },
  props: {
    title: {
      type: String,
      default: '选择人员'
    },
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      queryData: {
        jobNumber: '', // 工号
        userName: '' // 姓名
      },
      pageSizes: [10, 20, 30, 40],
      pagination: {
        pageNum: 1,
        total: 0,
        pageSize: 10
      },
      tableInfo: {
        list: [],
        loading: false,
        columns: [
          {
            title: '姓名',
            key: 'userName',
            width: 90
          },
          {
            title: '工号',
            key: 'jobNumber',
            width: 240
          },
          {
            title: '职位',
            key: 'hrJobName',
            width: 240
          },
          {
            title: '联系电话',
            key: 'mobile',
            width: 240
          },
          {
            title: '所属区域',
            key: 'companyName',
            width: 240
          },
          {
            title: '所属部门',
            key: 'companyId',
            width: 240
          },
        ],
      }
    };
  },
  computed: {
    ...mapGetters('permissions/systemBtns', ['showBtn'])
  },
  methods: {
    // 操作列
    actionRender (h, { row }) {
      return (
        <div class="table-action">
          <el-button
            size="mini"
            type="text"
            onClick={() => this.handleSelectSupplier(row)}
          > 选择
          </el-button>
        </div>
      );
    },
    // 选择供应商
    handleSelectSupplier (row) {
      this.$emit('handle-select', row);
      this.handleCloseDialog();
    },
    // 获取 表格数据
    handleQueryData (pageNum) {
      if (pageNum) {
        this.pagination.pageNum = pageNum;
      }
      this.tableInfo.loading = true;
      sessionStorage.setItem('buttonId', getBtnsId('查询'));
      queryHrUserService({ ...this.queryData, ...this.pagination }).then(res => {
        this.tableInfo.loading = false;
        if (isResponseSuccess(res)) {
          const { result } = res;
          this.tableInfo.list = result.list;
          this.pagination.total = result.totalPage;
          this.reloadTableLayout()
        }
      }).catch(() => {
        this.tableInfo.loading = false;
      });
    },
    // 分页状态变更
    handlePageChange (pageNum) {
      this.pagination.pageNum = pageNum;
      this.handleQueryData();
    },
    // 分页状态变更
    handlePageSizeChange (pageSize) {
      this.pagination.size = pageSize;
      this.handleQueryData(1);
    },
    // 重置查询条件
    handleResetData (formName) {
      this.$refs[formName].resetFields();
    },
    // 关闭弹框
    handleCloseDialog () {
      this.handleResetData('queryData')
      this.$emit('update:dialogVisible', false);
    },
    // 表格DOM重新渲染
    reloadTableLayout () {
      this.$nextTick(() => {
        this.$refs.basicTable.$refs.elTable.doLayout();
      });
    },
  }
};
</script>
<style scoped>
.form-container {
  margin-bottom: 10px;
}
</style>
